<template>
  <n-modal
    :show="showModal"
    preset="dialog"
    :show-icon="false"
    :title="editorDataList.id ? '修改' : '新增'"
    positive-text="确认"
    negative-text="取消"
    :style="{
      width: '640px'
    }"
    @positive-click="submitCallback"
    @negative-click="cancelCallback"
    @close="cancelCallback"
  >
    <div class="form-content">
      <n-form
        ref="formRef"
        :model="editorDataList"
        :rules="rules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
        size="medium"
        :style="{
          maxWidth: '640px'
        }"
      >
        <n-form-item label="任务名称" path="taskName">
          <n-input v-model:value="editorDataList.taskName" placeholder="请输入任务名称" />
        </n-form-item>
        <n-form-item label="接收者" path="taskTo">
          <n-input v-model:value="editorDataList.taskTo" placeholder="请输入接收者" />
        </n-form-item>
        <n-form-item label="路径" path="taskUrl">
          <n-input v-model:value="editorDataList.taskUrl" placeholder="请输入路径" />
        </n-form-item>
        <n-form-item label="参数" path="taskParam">
          <n-input v-model:value="editorDataList.taskParam" placeholder="请输入参数" />
        </n-form-item>
        <n-form-item label="Cron表达式" path="taskCron">
          <n-input v-model:value="editorDataList.taskCron" placeholder="请输入Cron表达式" />
        </n-form-item>
        <n-form-item label="请求方式" path="taskMethod">
          <n-radio-group v-model:value="editorDataList.taskMethod" name="radiogroup1">
            <n-space>
              <n-radio value="GET"> GET </n-radio>
              <n-radio value="POST"> POST </n-radio>
              <n-radio value="PUT"> PUT </n-radio>
              <n-radio value="DELETE"> DELETE </n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="描述">
          <n-input
            v-model:value="editorDataList.taskDesc"
            placeholder="请输入描述"
            type="textarea"
            :autosize="{
              minRows: 3,
              maxRows: 5
            }"
          />
        </n-form-item>
      </n-form>
    </div>
  </n-modal>
</template>

<script lang="ts">
  import { defineComponent, ref, watch, PropType } from 'vue'
  import { FormInst, useMessage } from 'naive-ui'
  import { http } from 'udp/utils/service/request'
  import { Row } from './type'

  export default defineComponent({
    props: {
      showModal: {
        type: Boolean,
        default: false
      },
      editorData: {
        type: Object as PropType<Row>,
        default: () => {
          return {}
        }
      }
    },
    emits: ['refresh', 'update:showModal'],
    setup(props, { emit }) {
      // 初始化数据
      const editorDataList = ref<Row>({ id: '' })
      const formRef = ref<FormInst | null>(null)
      const message = useMessage()

      // 监听props变化
      watch(
        () => props.showModal,
        () => {
          editorDataList.value = { ...props.editorData }
        }
      )

      // 关闭弹框
      const cancelCallback = () => emit('update:showModal', false)

      // 表单提交
      const submitCallback = () => {
        formRef.value?.validate(errors => {
          if (!errors) {
            const { id, ...data } = editorDataList.value
            const isAdd = !editorDataList.value?.id
            http({
              ignoreBaseUri: true,
              url: isAdd ? '/sys/task/add' : `/sys/task/update/${id}`,
              method: 'post',
              data,
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res: any) => {
              const msg = isAdd ? '添加' : '修改'
              if (res === true) {
                message.success(`${msg}成功`)
                emit('refresh')
                cancelCallback()
              } else {
                message.error(res.msg ? res.msg : `${msg}失败，请修改后重新提交`)
              }
            })
          }
        })
      }
      return {
        formRef,
        editorDataList,
        rules: {
          taskName: {
            required: true,
            message: '请输入任务名称'
          },
          taskTo: {
            required: true,
            message: '请输入接收者'
          },
          taskCron: {
            required: true,
            message: '请输入Cron表达式'
          }
        },
        submitCallback,
        cancelCallback
      }
    }
  })
</script>
<style lang="less" scoped>
  .form-content {
    background-color: #fff;
    padding: 20px;
  }
</style>
